<template>
	<gui-page ref="guipage" :fullPage="true">
		<template v-slot:gBody>
			<view class="main">
				<gui-a-header title="职业测评" bg="transparent"></gui-a-header>
				<view class="warp">
					<view class="gui-margin-top header" id="header">
						<view class="progress-txt cfff f24">
							答题进度 {{progress}}
						</view>
						<progress :percent="progressVal" activeColor="#FFFFFF" backgroundColor="rgba(255,255,255,0.5)"
							stroke-width="10" />
					</view>
					<swiper @change="swiperChange" :disable-touch="true" :current="currentIndex" class="swiper" :style="{
									height:mainHeight+'px'
								}">
						<swiper-item v-for="(item,index) in answerList" :key="index">
							<scroll-view :style="{height:mainHeight+'px'}" :scroll-y="true" class="scroll-view-bg">
								<view class="answer_warp mt40 bgfff">
									<view class="bot_warp"></view>
									<view class="problem">
										<view class="item">
											<view class="answer_type f18">多选题</view>
											<view class="title gui-bold mt20">
												<text> 根据《国家中长期教育改革和发展规划纲要(2010~2020年)》的规定，我国建立灵活开放的教师教学体系包含哪些</text>
												<text>( )</text>
											</view>
											<view class="ask">
												<view class="ask-item radius f24">
													<view class="check flex-ac-jb">
														<text>A.提高职业技能</text>
														<text class="gui-icons gui-bold">&#xe60f;</text>
													</view>
												</view>
												<view class="ask-item radius ask-item-check f24">
													<view class="check flex-ac-jb">
														<text>B.培养兴趣爱好</text>
														<text class="gui-icons gui-bold">&#xe60f;</text>
													</view>
												</view>
												<view class="ask-item radius ask-item-check f24">
													<view class="check flex-ac-jb">
														<text>C.提升就业创业能力</text>
														<text class="gui-icons gui-bold">&#xe60f;</text>
													</view>
												</view>
												<view class="ask-item radius">
													<view class="check flex-ac-jb f24">
														<text>D.获得就业机会</text>
														<text class="gui-icons gui-bold">&#xe60f;</text>
													</view>
												</view>
											</view>
											<view class="btn_warp mt20">
												<button class="saveBtn" @tap="nextAnswer">{{nextTxt}}</button>
												<view class="back f24 c999 center" v-if="currentIndex > 0"
													@tap="previousAnswer">
													返回上一题
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</template>
	</gui-page>

</template>

<script setup>
	import graceJS from "@/Grace6/js/grace.js"
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const $u = reactive(inject('$u'))

	const guipage = ref(null)
	const progress = ref('0/100');
	const progressVal = ref(0)
	const mainHeight = ref(200)
	const answerList = ref([1, 2, 3, 4, 5])
	const currentIndex = ref(0)
	const nextTxt = ref('下一题')

	onLoad(() => {
		// 01. 获取页面主体高度
		setTimeout(() => {
			graceJS.getRefs(guipage, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					graceJS.select('#header', (e2) => {
						mainHeight.value = e.height - e2.height;
					})
					computePross();
				});
			});
		}, 200)

	})

	const computePross = () => {
		const percentage = ((currentIndex.value + 1) / answerList.value.length) * 100;
		progress.value = (currentIndex.value + 1) + '/' + answerList.value.length;
		progressVal.value = (percentage);
		if(progressVal.value == 100) {
			nextTxt.value = '提交并获取测评结果'
		}else {
			nextTxt.value = '下一步'
		}
	}


	const swiperChange = (e) => {
		currentIndex.value = e.detail.current;
		computePross();
	}

	const nextAnswer = () => {
		if (currentIndex.value >= (answerList.value.length - 1)) {
			$u.msg('当前是最后一题了')
			$u.to(`/pages/index/evaluation/evaluation-result`, 'redirectTo')
		} else {
			currentIndex.value += 1;
		}
	}

	const previousAnswer = () => {
		if (currentIndex.value <= 0) {
			$u.msg('当前是第一题了')
		} else {
			currentIndex.value -= 1;
		}
	}
</script>

<style lang="scss">
	page,
	.main {
		width: 750rpx;
		height: 100%;
		background: linear-gradient(180deg, #0034C7 0%, #4072FE 100%);
	}

	.header {
		padding: 0 38rpx;
	}

	.warp {
		box-sizing: border-box;

	}

	.scroll-view-bg {
		padding-top: 66rpx;
		box-sizing: border-box;
	}

	.answer_warp {
		width: 672rpx;
		margin: 0 auto;
		position: relative;
		box-sizing: border-box;
		padding: 66rpx 0;
		border-radius: 14rpx;

		.bot_warp {
			width: 614rpx;
			height: 33rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
			border-bottom-left-radius: 14rpx;
			border-bottom-right-radius: 14rpx;
			opacity: 0.28;
			position: absolute;
			bottom: -33rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.answer_type {
		width: 78rpx;
		color: #fff;
		height: 33rpx;
		background: #4072FE;
		border-radius: 10rpx;
		text-align: center;
		line-height: 33rpx;
	}

	.problem {
		padding: 0 26rpx;
	}

	.problem .title::after {
		display: none;
	}

	.gui-bg-hui {
		background: rgba(255, 255, 255, 0.5);
	}

	.progress-txt {
		margin-bottom: 10rpx;
	}

	.saveBtn {
		width: 442rpx;
		font-size: 30rpx;
	}

	.center {
		padding: 28rpx 0;
		text-align: center;
	}
</style>